<template>
  <div class="container">
    <el-button @click="showAddDialog">新增</el-button>
    <el-button @click="showEditDialog">编辑</el-button>
    
    <simple-form-dialog
      title="表单对话框"
      :visible.sync="dialogVisible"
      width="500px"
      :initial-form-data="formData"
      :type-options="typeOptions"
      :confirm-loading="confirmLoading"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    ></simple-form-dialog>
  </div>
</template>

<script>
import SimpleFormDialog from '@/components/myDialog.vue'

export default {
  name: 'DemoPage',
  components: {
    SimpleFormDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogMode: 'add', // add 或 edit
      confirmLoading: false,
      // 下拉框选项
      typeOptions: [
        { value: 'type1', label: '类型一' },
        { value: 'type2', label: '类型二' },
        { value: 'type3', label: '类型三' }
      ],
      // 表单数据
      formData: {
        name: '111',
        description: '',
        type: ''
      }
    }
  },
  methods: {
    // 显示新增对话框
    showAddDialog() {
      this.dialogMode = 'add'
      this.formData = {
        name: '111',
        description: '描述---',
        type: ''
      }
      this.dialogVisible = true
    },
    // 显示编辑对话框
    showEditDialog() {
      this.dialogMode = 'edit'
      // 模拟编辑数据
      this.formData = {
        name: '示例名称',
        description: '这是一个示例描述',
        type: 'type2'
      }
      this.dialogVisible = true
    },
    // 处理表单确认
    async handleConfirm(formData) {
      this.confirmLoading = true
      try {
        // 这里可以调用API提交数据
        console.log('提交的表单数据:', formData)
        console.log('对话框模式:', this.dialogMode)
        
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 提交成功后关闭对话框
        this.dialogVisible = false
        this.$message.success(`${this.dialogMode === 'add' ? '新增' : '编辑'}成功`)
      } catch (error) {
        this.$message.error('操作失败：' + error.message)
      } finally {
        this.confirmLoading = false
      }
    },
    // 处理取消
    handleCancel() {
      this.$message.info('已取消操作')
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>
